<template>
  <div class="header-wrap">
    <header class="header-normal">
      <div class="logo-wrap">
        <img class="logo" src="//cdn2.jianshu.io/asimov/src/assets/image/nav-logo.faf216af.png" />
        <span class="slogan">创作你的创作</span>
      </div>
      <div class="download">
        免费下载
        <span class="iconfont">&#xe62d;</span>
      </div>
    </header>
    <div class="header-shim"></div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style scoped>
  .header-normal {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: .96rem;
    padding: .06rem .36rem;
    box-shadow: 0 .04rem .08rem rgba(0, 0, 0, .1);
    z-index: 10;
    background: #fff;
  }
  .logo-wrap {
    height: 100%;
    float: left;
  }
  .logo {
    height: 100%;
  }
  .slogan {
    line-height: .4rem;
    vertical-align: middle;
    margin-left: .16rem;
    display: inline-block;
    font-size: 16px;
    color: #333;
  }
  .header-shim {
    height: 1.04rem;
  }
  .download {
    position: absolute;
    right: 0;
    top: 0;
    padding: .24rem .3rem;
    font-size: 16px;
    color: #ea6f5a;
    line-height: 1.6;
  }
  .download>span {
    font-size: 12px;
    vertical-align: text-bottom;
  }
</style>
